<div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
  <mat-toolbar color="primary">
    <button mat-icon-button (click)="snav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <span class="example-app-name">News Headlines</span>
    <span class="example-spacer"></span>
    <button mat-icon-button [matMenuTriggerFor]="appMenu">
      <mat-icon>settings</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu #appMenu="matMenu">
    <button mat-menu-item>Settings</button>
    <button mat-menu-item>Help</button>
  </mat-menu>
  <mat-sidenav-container
    class="example-sidenav-container"
    [style.marginTop.px]="mobileQuery.matches ? 56 : 0"
  >
    <mat-sidenav
      #snav
      [mode]="mobileQuery.matches ? 'over' : 'side'"
      [fixedInViewport]="mobileQuery.matches"
      fixedTopGap="56"
    >
      <mat-list class="list-nav">
        <mat-list-item
          class="list-item"
          *ngFor="let source of mSources"
          (click)="searchArticles(source.id); sidenav.close()"
        >
          <div
            mat-card-avatar
            [ngStyle]="{
              'background-image': 'url(../assets/images/' + source.id + '.png)'
            }"
            class="example-header-image"
          ></div>

          <span class="source-name"> {{ source.name }}</span>
        </mat-list-item>
      </mat-list>
    </mat-sidenav>
    <mat-sidenav-content>
      <mat-card class="example-card" *ngFor="let article of mArticles">
        <mat-card-header>
          <div
            mat-card-avatar
            [ngStyle]="{
              'background-image':
                'url(../assets/images/' + article.source.id + '.png)'
            }"
            class="example-header-image"
          ></div>
          <mat-card-title class="title">{{ article.title }}</mat-card-title>
          <mat-card-subtitle>{{ article.source.name }}</mat-card-subtitle>
        </mat-card-header>
        <img
          mat-card-image
          class="img-article"
          src="{{ article.urlToImage }}"
          alt=""
        />
        <mat-card-content>
          <p>
            {{ article.description }}
          </p>
        </mat-card-content>
        <mat-card-actions class="action-buttons">
          <button mat-button color="primary">
            <mat-icon>thumb_up_alt</mat-icon> 12 Likes
          </button>
          <button mat-button color="primary">
            <mat-icon>comment</mat-icon> Comments
          </button>
          <button mat-button color="primary">
            <mat-icon>share</mat-icon> Share
          </button>
          <a mat-button color="primary" href="{{ article.url }}" target="_blank"
            ><mat-icon>visibility</mat-icon> More</a
          >
        </mat-card-actions>
      </mat-card>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>
